{% extends 'base.html' %}
{% from 'bootstrap5/form.html' import render_form %}
{% from 'bootstrap5/pagination.html' import render_pagination %}

{% block title %}{{ post.title }}{% endblock %}

{% block content %}
    <div class="page-header">
        <h1>{{ post.title }}</h1>
        <small>
            Category:
            <a class="bold_text" href="{{ url_for('blog.show_category', category_id=post.category.id) }}">
                {{ post.category.name }}
            </a>&nbsp;&nbsp;
            Public Date:
            <span class="bold_text">{{ moment(post.timestamp).format('LL') }}</span>
        </small>
    </div>
    <div class="row">
        <div class="col-sm-8">
            {{ post.body | safe }}
            <hr>
            <!-- Button trigger modal -->
            <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal"
                    data-bs-target="#postShareModal">
                Share Article
            </button>
            <!-- Modal -->
            <div class="modal fade" id="postShareModal" tabindex="-1" aria-labelledby="postModalLabel"
                 aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="postModalLabel">{{ post.title }}</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <input type="text" class="form-control" readonly id="shareLink"
                                   value="{{ url_for('blog.show_post', post_id=post.id, _external=True) }}">
                        </div>
                        <div class="modal-footer">
                            <button class="btn btn-primary" data-bs-dismiss="modal" data-clipboard-target="#shareLink">
                                Copy Link
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Post Comments -->
            <div class="comments" id="comments">
                <h3>{{ post.comments | length }} Comments</h3>
                {% if comments %}
                    <ul class="list-group">
                        {% for comment in comments %}
                            {% set moment_time=moment(comment.timestamp) %}
                            <li class="list-group-item list-group-item-action flex-column">
                                <div class="d-flex w-100 justify-content-between">
                                    <h5 class="mb-1">
                                        <a href="{% if comment.site %}{{ comment.site }}{% else %}#{% endif %}"
                                           target="_blank">
                                            {% if comment.from_admin %}
                                                {{ admin.name }}
                                            {% else %}
                                                {{ comment.author }}
                                            {% endif %}
                                        </a>
                                        {% if comment.from_admin %}
                                            <span class="badge bg-success">Author</span>
                                        {% endif %}
                                        {% if comment.replied %}
                                            <span class="badge bg-info">Reply</span>
                                        {% endif %}
                                    </h5>
                                    <small class="text-muted" data-bs-toggle="tooltip" data-bs-placement="top"
                                           data-timestamp="{{ moment_time.format('LL') | striptags }}">
                                        {{ moment_time.fromNow(refresh=True) }}
                                    </small>
                                </div>
                                {% if comment.replied %}
                                    <p class="reply-body alert alert-info">
                                        {{ comment.replied.author }}:<br>
                                        {{ comment.replied.body }}
                                    </p>
                                {% endif %}
                                <p class="mb-1">{{ comment.body }}</p>
                                <div style="float:right;">
                                    <a class="btn btn-primary btn-sm"
                                       href="{{ url_for('blog.reply_comment', comment_id=comment.id) }}">
                                        Reply
                                    </a>
                                    {% if current_user.is_authenticated %}
                                        <button class="btn btn-info btn-sm" data-clipboard-text="{{ comment.email }}"
                                                data-bs-toggle="tooltip" data-bs-placement="top"
                                                title="copy email to clipboard">
                                            Email
                                        </button>
                                        <form class="inline" method="post"
                                              action="{{ url_for('admin.delete_comment', comment_id=comment.id, next=request.full_path) }}">
                                            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                                            <button type="submit" class="btn btn-danger btn-sm" onclick="return confirm('Are you sure?');">
                                                Delete
                                            </button>
                                        </form>
                                    {% endif %}
                                </div>
                            </li>
                        {% endfor %}
                    </ul>
                    <div class="page-footer">{{ render_pagination(pagination) }}</div>
                {% else %}
                    <div class="card">
                        <div class="card-body tip"><h5>No Comments.</h5></div>
                    </div>
                {% endif %}
            </div>
            {% if request.args.get('reply') %}
                <div class="alert alert-info">
                    Reply To <span class="badge bg-info">{{ request.args.get('author') }}</span>
                    <a style="float:right;" href="{{ url_for('blog.show_post', post_id=post.id) }}">×</a>
                </div>
            {% endif %}
            <div id="comment-form">
                {{ render_form(form, action=request.full_path) }}
            </div>
        </div>
        <div class="col-sm-4 sidebar">
            {% include 'blog/_sidebar.html' %}
        </div>
    </div>
{% endblock %}

{% block scripts %}
    {{ super() }}
    <script type="text/javascript" src="{{ url_for('static', filename='js/clipboard.min.js') }}"></script>
    <script>
        var clipboard = new ClipboardJS('.btn');
    </script>
{% endblock %}
